<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
    <title>故障检测与诊断-v1.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/js/iCheck/flat/all.css" >
    <link rel="stylesheet" href="assets/js/iCheck/line/all.css" >
    <link rel="stylesheet" href="assets/js/validate/validate.css" >
    <link rel="stylesheet" href="assets/js/idealform/css/jquery.idealforms.css" >
    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable.standalone.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css" > 
    <link rel="stylesheet" href="css/custom.css" > 
    <link rel="shortcut icon" href="assets/ico/minus.png">
        
	<link href="css/datepicker3.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
    <style>
    	.div select{width:200px;}
		.div select option{width:150px;height:30px;}
    </style>
    
</head>

<body>
  <div id="awwwards" class="right black"><a href="http://www.awwwards.com/best-websites/apricot-navigation-admin-dashboard-template" target="_blank">best websites of the world</a></div>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <script type="text/javascript" src="common/public/header.js"></script>
    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <script type="text/javascript" src="common/public/slider.js"></script>
    <!-- END OF SIDE MENU -->



    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">

            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <span class="entypo-menu"></span>
                            <span>MySQL
                            </span>
                        </h2>

                    </div>

                    <div class="col-sm-7">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="tittle-middle-header">
                      </div>

                    </div>
                    <div class="col-sm-2">
                        <div class="devider-vertical visible-lg"></div>
                      </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <!-- lxk导航栏 -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">DETECTION</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">MySQL监控</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">Spark监控</a>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->


            <div class="content-wrap">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="nest" id="FootableClose">
                            <div class="title-alt">
                              <span >Spark监控</span>
                                <div class="titleClose">
                                    <a class="gone" href="#FootableClose">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#Footable">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>

                            </div>
                            
                            <div class="body-nest" id="Footable">
                            	<!-- 基础 -->
	                           <div  class="">
	                              <div>                   
		                               <input id="txt1" value="请输入主机名"   onblur="if(this.value == '')this.value='请输入主机名';" 
		                               onclick="if(this.value == '请输入主机名') this.value='';" name="" />
		                               
		                               <input id="txt2" value="请输入标签"    onblur="if(this.value == '')this.value='请输入标签';" 
		                               onclick="if(this.value == '请输入标签') this.value='';"  name="" />
		                               
		                               	
		                               	<select id="s1" data-toggle="dropdown" class="btn dropdown-toggle" name="">
		                               		<option selected="selected" value="0"> 连接线程数 </option>
		                                    <option>1</option>
		                                    <option>2</option>
		                                    <option>3</option>
		                                    <option>4</option>
		                                    <option>5</option>
		                                </select>
		                                
		                                <select id="s2" data-toggle="dropdown" class="btn dropdown-toggle" name="">
		                               		<option selected="selected" value="0"> 活动线程数 </option>
		                                    <option>1</option>
		                                    <option>2</option>
		                                    <option>3</option>
		                                    <option>4</option>
		                                    <option>5</option>
		                                </select>
		                                
		                                <select id="s3" data-toggle="dropdown" class="btn dropdown-toggle" name="">
		                               		<option selected="selected" value="0">--排序--</option>
		                                    <option>主机名称</option>
		                                    <option>标签名称</option>
		                                    <option>角色</option>
		                                    <option>运行时间</option>
		                                    <option>连接线程数</option>
		                                </select>
										
										
										<select id="s4" data-toggle="dropdown" class="btn dropdown-toggle" name="">
		                                    <option>正序</option>
		                                    <option>反序</option>
		                                </select>
		                               
										
										<button id="searchBtn" type="button" class="btn btn-info">搜 索</button>
		                                <button id="resetBtn" type="button" class="btn btn-info" >重 置</button>
										<button id="freshBtn" type="button" class="btn btn-info">刷 新</button>
										
	                               	</div>
	                               	<br>
	                               	<div>
										<h4 align="center">Spark监控基本指标表</h4>
									</div>
									<br>
	                               	<div>
			                            <table  id="" class="table" border="1" data-filtering="true" data-paging="true" >
		                                   <thead>
	                                   		<tr >
		                                   		<th colspan="3" align="left">连接数</th>
		                                   		<th colspan="3" align="left">缓冲区</th>
		                                   		<th colspan="3" align="left">I/O</th>
		                                   		<th colspan="3" align="left">磁盘</th>
		                                   </tr>
		                                   <tr>
		                                   		<th>主机</th>
		                                   		<th>标签</th>
		                                   		<th>连接</th>
		                                   		<th>角色</th>
		                                   		<th>运行时间</th>
		                                   		<th>版本</th>
		                                   		<th>连接线程数</th>
		                                   		<th>活动线程数</th>
		                                   		<th>等待线程数</th>
		                                   		<th>接收</th>
		                                   		<th>发送</th>
		                                   		<th>每秒查询</th>
		                                   		
		                                   </tr>
		                                   </thead>
		                                   <tbody></tbody>
		                                    
		                                </table><br>
		                                <div>
											<h4 align="center">Spark监控其他指标表</h4>
										</div>
										<table  id="" class="table" border="1" data-filtering="true" data-paging="true" >
		                                   <thead>
	                                   		<tr >
		                                   		<th colspan="3" align="left">连接数1</th>
		                                   		<th colspan="3" align="left">缓冲区2</th>
		                                   		<th colspan="3" align="left">I/O3</th>
		                                   		
		                                   </tr>
		                                   <tr>
		                                   		<th>主机</th>
		                                   		<th>标签</th>
		                                   		<th>连接</th>
		                                   		<th>角色</th>
		                                   		<th>运行时间</th>
		                                   		<th>版本</th>
		                                   		<th>连接线程数</th>
		                                   		<th>活动线程数</th>
		                                   		<th>等待线程数</th>
		                                   </tr>
		                                   </thead>
		                                   
		                                   <tbody></tbody>
		                                    
		                                </table><br>
		                                
	                                </div>
	                            </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- /END OF CONTENT -->

<!-- 进程搜索模块 -->

            <!-- 进程搜索模块结束 -->

            <!-- FOOTER -->
            <div class="footer-space"></div>
            <div id="footer">
                

            </div>
            <!-- / END OF FOOTER -->


        </div>
    </div>
    <!--  END OF PAPER WRAP -->

    <!-- RIGHT SLIDER CONTENT -->
    

    <!-- END OF RIGHT SLIDER CONTENT-->


    
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/iCheck/jquery.icheck.js"></script>
    <script type="text/javascript" src="assets/js/switch/bootstrap-switch.js"></script>
   
    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    
    <!--footable相关的js  -->
    <script type="text/javascript" src="plugins/footable/3.1.6/footable.min.js"></script>
	<script type="text/javascript" src="plugins/footable/3.1.6/footable.js"></script>
	 

</body>

</html>
